<template>
  <div class="containsClass">
    <div class="bodyClass">
      <div>
        <img
          class="backClass"
          @click="goBack"
          src="@/assets/login/fanhui.svg"
        />
        <div class="titleClass">选择班级</div>
        <img
          class="szClass"
          @click="goSet()"
          src="@/assets/images/szsbcs.svg"
        />
        <div class="boxClass">
          <a-tree-select
            v-model="bjid"
            style="width: 80%"
            :dropdown-style="{ height: '58vh', overflow: 'auto' }"
            placeholder="请选择班级"
            tree-default-expand-all
            @change="bjChange"
          >
            <a-icon
              slot="suffixIcon"
              type="caret-down"
              style="font-size: 24px"
            />
            <a-tree-select-node
              v-for="(i, index) in njList"
              :key="index"
              :value="i.gradeId"
              :title="i.gradeName"
              disabled
            >
              <a-tree-select-node
                v-for="(subVal, subIndex) in i.classList"
                :key="index + '-' + subIndex"
                :value="subVal.classId"
                :title="subVal.className"
              >
              </a-tree-select-node>
            </a-tree-select-node>
          </a-tree-select>
          <div class="infoBox" v-if="noState">请选择班级</div>
          <div class="buttonBox">
            <a-button shape="round" @click="goPage(1)" class="btnClass"
              >计划测试</a-button
            >
            <a-button shape="round" @click="goPage(0)" class="btnClass"
              >自由测试</a-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Modal } from "ant-design-vue";
export default {
  data() {
    return {
      bjid: null,
      bjValue: null,
      njList: JSON.parse(sessionStorage.getItem("njList")),
      noState: false,
      classData: JSON.parse(sessionStorage.getItem("classData")),
      loginForm: this.$form.createForm(this, { name: "coordinated" }),
    };
  },
  created() {
    this.$store.commit("setIsShow", false);
    if (!this.njList) {
      this.$router.push("/login");
    } 
    if (this.classData) {
      this.bjValue = this.classData;
      this.bjid = this.classData.classId;
    }
  },
  mounted() {
    if (this.njList.length === 1) {
      console.log("this.njList", this.njList);
      if (this.njList[0].classList.length === 1) {
        this.bjValue = this.njList[0].classList[0];
        this.bjid = this.njList[0].classList[0].classId;
      }
    }
    let userInfo = JSON.parse(sessionStorage.getItem("myUserInfo"));
    let values = {
      userId: userInfo.uid,
      loginKey: userInfo.loginKey,
      uid: userInfo.uid,
    };
    this.$POST("/pad/getUserPadModel", values).then((r) => {
      if (r.data) {
        localStorage.setItem("sizeValue", r.data.screenWidth);
        let dataVal1 = r.data.screenResolution.split("*");
        localStorage.setItem("resolution", dataVal1[0]);
        localStorage.setItem("screenHeight", dataVal1[1]);
        localStorage.setItem("distance", r.data.distance);
      }
    });
  },
  methods: {
    goSet() {
      this.$router.push({ name: "Setting", params: { isTrue: true } });
    },
    goBack() {
      this.$router.go(-1);
    },
    bjChange(val, lab, extra) {
      console.log("extra", extra);
      this.bjValue = { classId: val, className: lab[0] };
    },
    goPage(type) {
      if (this.bjValue) {
        let sizeValue = localStorage.getItem("sizeValue");
        if (!sizeValue) {
          let that = this;
          return Modal.warning({
            title: "温馨提示",
            closable: true,
            okText: "前往",
            content: "您尚未设置视标参数，请立即进行设置以确保视表显示效果。",
            onOk() {
              that.$router.push({ name: "Setting", params: { isTrue: true } });
            },
            onCancel() {},
          });
        }
        let resolution = localStorage.getItem("resolution");
        let screenHeight = localStorage.getItem("screenHeight");
        var screenWidth = window.screen.width * window.devicePixelRatio;
        if (resolution && screenHeight && resolution != screenWidth) {
          return Modal.warning({
            title: "温馨提示",
            closable: true,
            okText: "前往",
            content:
              "当前分辨率与配置的分辨率（" +
              resolution +
              "*" +
              screenHeight +
              "）不一样，请前往重新设置以确保视表显示效果。",
            onOk() {
              //that.$router.push("Setting");
            },
            onCancel() {},
          });
        }

        sessionStorage.setItem("classData", JSON.stringify(this.bjValue));

        if (type === 0) {
          sessionStorage.setItem("screeningId", 0);
          this.$router.push("ClassList");
        } else {
          this.$router.push("ChoosePlan");
        }
      } else {
        this.noState = true;
        setTimeout(() => {
          this.noState = false;
        }, 2000);
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-select-selection {
  height: 54px;
  font-size: 130%;
  color: #2ebcfb;
  border: 2px solid #2ebcfb;
  border-radius: 52px;
}
/deep/ .ant-select-selection__rendered {
  height: 52px;
  line-height: 52px;
  margin-left: 36px;
}
/deep/ .ant-select-arrow {
  top: 35%;
}
/deep/ .ant-select-tree-node-content-wrapper {
  font-size: 130%;
}
///deep/ .ant-select-tree-switcher{
//  height: 18px !important;
//  line-height: 18px !important;
//}
.containsClass {
  width: 30vw;
  height: 100%;
  .bodyClass {
    width: 100%;
    height: 100%;
    background-size: cover; /* 图片覆盖整个容器 */
    background-repeat: no-repeat; /* 防止图片重复 */
    background-position: center; /* 图片居中显示 */
    background-image: url("~@/assets/login/beijingtu_a.png");
    margin: 0 auto;
    padding-top: 0.2rem;
    text-align: center;
    font-weight: bold;
    position: relative;
    & > div {
      width: 90%;
      height: 100%;
      margin: 0 auto;
      position: relative;
      .backClass {
        position: absolute;
        cursor: pointer;
        left: 0;
        top: 0;
        width: 0.25rem;
        height: 0.25rem;
      }
      .szClass {
        position: absolute;
        cursor: pointer;
        right: 0;
        top: 0;
        width: 0.25rem;
        height: 0.25rem;
      }
      .flexClass {
        display: flex;
        align-items: center;
        margin-bottom: 0.1rem;
        text-align: center;
      }
      .titleClass {
        font-size: 0.16rem;
        color: #0f6c80;
        margin-bottom: 0.1rem;
      }
      .valueClass {
        margin-bottom: 0.18rem;
      }
    }
    .boxClass {
      .infoBox {
        font-size: 180%;
        padding: 16px;
        border-radius: 8px;
        color: #ffffff;
        display: block;
        margin-top: 16px;
        background-color: rgba(0, 0, 0, 0.6);
      }
      .buttonBox {
        width: 100%;
        position: absolute;
        bottom: 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .btnClass {
        width: 45%;
        height: 0.3rem;
        font-size: 0.12rem;
        letter-spacing: 0.03rem;
        text-indent: 0.03rem;
        color: #fff;
        background-color: #ffa574;
        //margin-top: 0.25rem;
      }
    }
  }
}
.no-autofill-pwd {
  -webkit-text-security: disc !important;
}
</style>